<template>
  <div class="dashboard-container">
    <div class="clearfix">
      <Cthumb :image="avatar[0].url" style="float: left">
        <span class="pan-info-roles">{{ name }}</span>
      </Cthumb>
      <el-tooltip effect="dark" content="前往楚楚街商城" placement="left">
        <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
      </el-tooltip>
      <div class="info-container">
        <span class="display_name">{{ name }}</span>
        <div class="flex mt30" style="align-items: center">
          <p style="font-size:20px;">欢迎进入楚楚街商家中心</p>
          <Cimage :src="RightArrow" width="100px" class="ml30" />
          <el-button type="primary" size="medium" class="mt5" @click="toShop">前往楚楚街商城</el-button>
        </div>
      </div>
    </div>
    <div v-if="env == 'development'">
      <p style="display: flex;align-items: center;">文档地址：https://docs.apipost.cn/preview/ed92426fe44ffd54/0fb34259b25568a9?target_id=1e2b1b76-b8b7-479f-d57b-90d72d247798#001</p>
      <p style="display: flex;align-items: center;">主题颜色：<theme-picker @change="themeChange" /> {{ themeColor }}</p>
    </div>
    <iframe height="100%" width="100%" style="width: 100%;height: 100%;" src="https://docs.apipost.cn/preview/ed92426fe44ffd54/0fb34259b25568a9?target_id=1e2b1b76-b8b7-479f-d57b-90d72d247798#001" frameborder="1" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Cthumb from '@/components/Cthumb'
import GithubCorner from '@/components/GithubCorner'
import ThemePicker from '@/components/ThemePicker'
import variables from '@/styles/element-variables.scss'
import RightArrow from '@/assets/images/RightArrow.gif'
export default {
  name: 'Dashboard',
  components: { Cthumb, GithubCorner, ThemePicker },
  data() {
    return {
      RightArrow: RightArrow,
      themeColor: variables.theme,
      env: process.env.NODE_ENV // 环境变量
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar'
    ])
  },
  methods: {
    // 跳转商城
    toShop() {
      window.open('http://shop.jiangtao.ltd')
    },
    themeChange(val) {
      console.log(val)
      this.$store.dispatch('settings/changeSetting', {
        key: 'theme',
        value: val
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    height: 100vh;
    padding: 50px 60px 0px;
    .pan-info-roles {
      font-size: 12px;
      font-weight: 700;
      color: #333;
      display: block;
    }
    .info-container {
      position: relative;
      margin-left: 190px;
      // height: 150px;
      // line-height: 200px;
      .display_name {
        font-size: 48px;
        line-height: 48px;
        color: #212121;
        // position: absolute;
        // top: 25px;
      }
    }
  }
</style>
